<template>
  <div class="dashboard-container">
    <!-- <sidebar class="sidebar-container" /> -->
    <NavMenu  class="sidebar-container"></NavMenu>

  <div class="box-line">
    <div v-for="(item, index) in line1" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>

  <div class="box-line">
    <div v-for="(item, index) in line2" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>

  <div class="box-line">
    <div v-for="(item, index) in line3" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>

  <div class="box-line">
    <div v-for="(item, index) in line4" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>

  <div class="box-line">
    <div v-for="(item, index) in line5" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>

  <div class="box-line">
    <div v-for="(item, index) in line6" :key="index" class="box">
      <th>{{ item.title }}</th>
      <div class="line"></div>
      <td v-for="(i, n) in item.text" :key="n" >
      <router-link :to="i.link">{{i.title}}</router-link>
      </td>
    </div>
  </div>
    
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import { Sidebar } from '@/layout/components/index'
import Sidebar from "@/layout/components/Sidebar/index.vue"
import NavMenu from '@/components/NavMenu.vue'



export default {
  name: "Dashboard",
  components: {
    Sidebar,
    NavMenu  
  },
  // computed: {
  //   ...mapGetters(["name"]),
  // },
  data() {
    return {
      line1: [
        {
          title: "财务工作台",
          text: [
            {title:'财务看板',link:'/kanban'}
          ]
        },
        {
          title: "基础配置",
          text: [
            {title:'出港结算关系配置',link:'/relationship'},
            {title:'出港结算参数维护',link:'/maintenance'},
            {title:'出港拉均配置',link:'/pulleven'},
            {title:'科目配置',link:'/subjects'},
            {title:'出港自动导出配置',link:'/export'},


            
          // "出港结算关系配置", "出港结算参数维护",'出港拉均配置','科目配置','出港自动导出配置'
        
        ],
        }
      ],
      line2:[
        {
          title: "出港结算",
          text: [
            {title:'出港发件费结算',link:'/shippingFee'},
            {title:'包仓费其他费用结算',link:'/package'},
            {title:'客户账单管理',link:'/bill'},
            {title:'网点揽收分润账单',link:'/pickup'},
            {title:'出港报价中心',link:'/quote'},
            {title:'面单费报价',link:'/faceSheet'},
            {title:'面单费补收',link:'/collection'},
            {title:'代业务员对客户结算',link:'/settlement'},
          ]
          // text: [
          //   "出港发件费结算",
          //   "包仓费其他费用结算",
          //   "客户账单管理",
          //   "网点揽收分润账单",
          //   "出港报价中心",
          //   "面单费报价",
          //   "面单费补收",
          //   "代业务员对客户结算",
          // ],
        }
      ],
      line3:[
        {
          title: "进港结算",
          text: [
            {title:'派费结算',link:'/dispatchFee'},
            {title:'进港派费结算',link:'/Incoming'},
            {title:'派费直达管理',link:'/direct'},
          ]
          // text: ["派费结算", "进港派费结算",'派费直达管理'],
        },
        {
          title: "考核结算",
          text: [
            {title:'奖罚分摊结算',link:'/reward'},
          ]
          // text: ["奖罚分摊结算", "考核分摊结算"],
        }
      ],
      line4: [
        {
          title: "资金管理",
          text: [
            {title:'站点预付款',link:'/site'},
            {title:'总部预付款',link:'/headquarters'},

          ]
          // text: ["站点预付款", "总部预付款",'站点预付款'],
        },
        {
          title: "成本管理",
          text: [
            {title:'承/业工资表',link:'/Inheritance'},
            {title:'职能/其他人员工资表',link:'/Functions'},
            {title:'固定费用录入',link:'/fixed'},
          ]
          // text: ["承/业工资表", "职能/其他人员工资表",'固定费用录入'],
        }
      ],
      line5: [
        {
          title: "经营报表",
          text: [
            {title:'人效统计分析',link:'/humanEffect'},
            {title:'客户经营',link:'/fixed'},
          ]
          // text: ["人效统计分析", "客户经营"],
        },
        {
          title: "运营能力分析",
          text: [
            {title:'出港流向结构分析',link:'/Flow'},
            {title:'承/业流向结构分析',link:'/structure'},
            {title:'客户流向结构分析',link:'/client'},
            {title:'区域收入分析',link:'/region'},
          ]
          // text: ["出港流向结构分析", "承/业流向结构分析",'客户流向结构分析','区域收入分析'],
        }
      ],
      line6: [
        {
          title: "数据对比",
          text: [
            {title:'重量差异报表',link:'/weight'},
            {title:'包重差异报表',link:'/packageWeight'},
          ],
          // text: ["重量差异报表", "包重差异报表"],
        },
        {
          title: "对账中心",
          text: [
            {title:'承/业对账中心',link:'/ReconciliationCenter'},
          ],
          // text: ["承/业对账中心"],
        }
      ]
    };
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: 210px;

}

.box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-flow: column;
  margin: 30px 0px 40px 40px;
  th{
    font-size: 20pt;
    font-weight: normal;
  }
  td {
    margin: 10px 0 10px 0;
    color: #ccc;
    font-size: 18px;
  }
}

.line {
  height: 1px;
  color: #9999;
  background: #9999;
  width: 216px;
  margin: 10px 0px 10px 0;
  margin-left: 20px;
}
</style>
